<template>
	<view class="base-time">
		<view>{{ timeFmt().month || '00' }}<text>月</text></view>
		<view>{{ timeFmt().day || '00' }}<text>日</text></view>
		<view class="time">{{ timeFmt().hour || '00' }}</view>
		<text>:</text>
		<view>{{ timeFmt().minute || '00' }}</view>
		<text>:</text>
		<view>{{ timeFmt().second || '00' }}</view>
		111
	</view>
</template>
 
<script>
	export default {
		name:'basetime',
		components: {},
		mixins: [],
		props: {
			timeDataStr: {
				type: String,
				default: ''
			}
		},
		data() {
			return {}
		},
		watch: {},
		computed: {},
		created() {},
		methods: {
			timeFmt() {
				var str = this.timeDataStr.replace(/\-/g, '/')
				const time = new Date(str)
				return {
					month: this.timeMake(time.getMonth() + 1),
					day: this.timeMake(time.getDate()),
					hour: this.timeMake(time.getHours()),
					minute: this.timeMake(time.getMinutes()),
					second: this.timeMake(time.getSeconds())
				}
			},
			timeMake(time) {
				if (time < 10) {
					return '0' + time
				} else {
					return time
				}
			}
		}
	}
</script>
 
<style lang="scss">
	.base-time {
		display: flex;
		align-items: center;
		padding: 12rpx 24rpx;
		background: #ffffff;
		border-radius: 8rpx;
		margin-bottom: 32rpx;
		font-size: 40rpx;
		color: #000000;
 
		text {
			margin: 0 12rpx;
		}
 
		.time {
			margin-left: 24rpx;
		}
	}
</style>